<style scoped>
    .add {
        margin-left: 10px;
    }

    .code {
        width: 200px;
        margin-left: 10px;
    }

    .sousuo {
        margin-left: 10px;
    }

    .actionBtn {
        margin-left: 5px;
    }

    .page_style {
        margin-top: 10px;
        text-align: right;
    }

    .delete {
        margin-left: 10px;
    }
</style>
<template>
    <wl-content-top>
        <template slot="header">
            <Form>
                <FormItem>
                    <FormItem>
                        <span class="name">分类名称：</span>
                        <Select v-model="categoryName" style="width:200px;margin-left: 10px" clearable>
                            <Option v-for="(item,index) in titleList" :value="item.title" :key="index">{{ item.title
                                }}
                            </Option>
                        </Select>
                        <Button type="success" class="sousuo" @click="searchTitle">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                        <Button type="primary" class="add" @click="addCategory">
                            <Icon type="ios-add"/>
                            添加分类
                        </Button>
                        <Button class="delete" type="error" @click="delSelect">批量删除
                        </Button>
                    </FormItem>
                </FormItem>
            </Form>
        </template>
        <template slot="body">
            <div>
                <Table border ref="selection" :loading="loading" :columns="categoryList" :data="categoryData"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="actionBtn" @click="editCategory(row)">编辑</Button>
                        <Button type="info" size="small" class="actionBtn" @click="details(row)">详情</Button>
                        <Button type="error" size="small" class="actionBtn" @click="remove(row)">删除</Button>
                    </template>
                </Table>
            </div>
            <add-edit-category ref="edit" :type="type" :isShow="addEditModal" :cateTitle="titleName" :id="cateId"
                               @cancel="cancelAction" @results="save"></add-edit-category>
            <category-details :isShow="detailsModal" :data="data" @cancel="cancelAction"></category-details>
        </template>
    </wl-content-top>
</template>

<script>
import {
  getCategoryList,
  getCategoryNameList,
  deleteCategory,
  deleteCategoryStrips,
  addCategory,
  editCategory
} from '@/api/manager'
import { date2str } from '@/api/user'
import AddEditCategory from './components/add-edit-category/index'
import CategoryDetails from './components/category-details/index'

export default {
  components: { CategoryDetails, AddEditCategory },
  data () {
    return {
      categoryName: '',
      titleList: [],
      model1: '',
      index: '',
      categoryList: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '分类名称',
          key: 'title'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      categoryData: [],
      addEditModal: false,
      titleName: '',
      cateId: '',
      type: '',
      detailsModal: false,
      loading: false,
      data: {}
    }
  },
  methods: {
    init (data) {
      this.loading = true
      getCategoryList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.loading = false
          this.categoryData = ret.data.data.list
        } else {
          this.loading = false
          this.error(data)
        }
      })
    },
    getNameList () {
      getCategoryNameList().then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.titleList = ret.data.data.list
        } else {
          this.error()
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchTitle () {
      let param = {
        title: this.categoryName
      }
      this.init(param)
    },
    addCategory () {
      this.addEditModal = true
      this.titleName = '添加分类'
      this.type = 'add'
    },
    editCategory (row) {
      this.addEditModal = true
      this.titleName = '编辑分类'
      this.cateId = row.id
      this.type = 'edit'
    },
    cancelAction () {
      this.addEditModal = false
      this.detailsModal = false
    },
    save (formItem) {
      this.$refs.edit.btnLadoing = true
      formItem.create_time = date2str(formItem.create_time)
      if (formItem.id === null || formItem.id === undefined || formItem.id === '') {
        let param = {
          title: formItem.title,
          create_time: formItem.create_time
        }
        addCategory(param).then(ret => {
          if (ret.data.errcode === 1001) {
            this.success()
          } else {
            this.error()
          }
          this.$refs.edit.btnLadoing = true
          this.init()
          this.addEditModal = false
        })
      } else {
        editCategory(formItem).then(ret => {
          if (ret.data.errcode === 1001) {
            this.success()
          } else {
            this.error()
          }
          this.$refs.edit.btnLadoing = false
          this.init()
          this.addEditModal = false
        })
      }
    },
    details (row) {
      this.detailsModal = true
      this.data = row
    },
    remove (row) {
      this.$Modal.confirm({
        title: '确定要删除吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          let param = { id: row.id }
          deleteCategory(param).then(ret => {
            if (ret.data.errcode === 1001) {
              this.$Modal.remove()
              this.init()
              this.success()
            } else {
              this.$Modal.remove()
              this.error()
            }
          })
        }
      })
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item) => {
        ids.push(item.id)
      })
      this.$Modal.confirm({
        title: '确认删除选中信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          deleteCategoryStrips({ ids: JSON.stringify(ids) }).then(ret => {
            if (ret.data.errcode === 1001) {
              this.init()
              this.success()
            } else {
              this.error()
            }
          })
        }
      })
    },
    tableSelectChange (selection) {
      this.selectData = selection
    }
  },
  mounted () {
    this.init()
    this.getNameList()
  }
}
</script>
